<template>
	<div>
		<header class="text-center">
			<div class="header-top">
				<div class="container-fluid">
					<div class="row">
						<div class="col-xs-3 col-md-2">
							<img class="fanhui" src="../assets/img/fanhui.png" @click="$router.go(-1)" />
						</div>
						<div class="col-xs-4 col-md-8" style="font-size: 1.15em;"></div>
						<div class="col-xs-3 col-md-1">
							<img class="imgq" src="../assets/img/logo.png"  style="width: 130px;height: 40px;">
							<!-- <a style="color: #ffffff" href="javascript:;"><span @click="logout">注销</span></a> -->
							<a style="color: #ffffff" href="javascript:;">
								<!-- <span @click="logout">注销</span> -->
							</a>
						</div>
					</div>
				</div>
			</div>
		</header>
		<div class="aui-main">
			<!-- s -->

			<div>
				<p class="article-title">
					{{data.title}}
				</p>
			</div>
			<div class="article-content">
				<p v-html="data.main"></p>
				<p><img :src="require('../config').serverUrl + data.imgUrl" alt="" /></p>
				<p><img :src="require('../config').serverUrl + data.imgUrl1" alt="" /></p>
				<p><img :src="require('../config').serverUrl + data.imgUrl2" alt="" /></p>
				<p><img :src="require('../config').serverUrl + data.imgUrl3" alt="" /></p>
				<div class="icon">
					<span v-html="data.zuozhe"></span>
					<br>
					<span>
						<img class="imgq1" src="../assets/img/shoucang.png" style="width: 18px;" />
					</span>&nbsp;<span>{{data.shoucang}}</span>&nbsp;
					<span>
						<img class="imgq1" src="../assets/img/dianzan.png" style="width: 18px;" />
					</span>&nbsp;<span>{{data.dianzan}}</span>&nbsp;
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'detail',
		props: {},
		data() {
			return {
				data: {}
			}
		},
		components: {},
		mounted() {
			this.$axios({
				url: '/api/list/' + this.$route.query.collectionName + "/" + this.$route.params._id
			}).then(
				res => this.data = res.data
			)
		},
		updated() {},
		methods: {}
	}
</script>

<style scoped>
	.fanhui {
		height: 2em;
		/* line-height: 2.5em; */
		width: 25px;
		position: absolute;
		top: -5px;
		left: 20px;
	}
	.imgq{
		position: absolute;
		top:-11px;
		right: -5rem;
		}

	* {
		box-sizing: border-box;
		font-size: 1.02em;
	}

	body {
		margin: 0;
		font-family: 微软雅黑;
	}

	a {
		text-decoration: none;
		color: #333;
	}

	.row {
		padding-top: 6px;
	}

header {
		padding-top: 0.4em;
		height: 3em;
		width: 100%;
		color: #fff;
		font-size: 0.95em;
		background: #FA0100;
		/* background: linear-gradient(to bottom right, #e51a14, #e51a14); */
		position: fixed;
		left: 0;
		top: 0;
		z-index: 9999;
	}
	.header-top {
		width: 100%;
		/* position: fixed; */
		left: 0;
		top: 2.5em;
		z-index: 9999;
	}

	.icon {
		padding-left: 3px;
	}

	.icon span {
		padding-right: 5px;
	}

	.aui-main {
		padding-top: 25px;
		padding-bottom: 70px;
		margin: 0px 20px;
	}

	.article-title {
		color: #000;
		text-indent: 25px;
		padding-top: 1.5rem;
		font-size: 18px;
		line-height: 18px;
		line-height: 1.45;
		font-weight: 600;
	}

	.article-content p {
		text-indent: 25px;
		word-wrap: break-word;
		color: #000;
		font-size: 14px;
		line-height: 25px;
	}

	.article-content p img {
		width: 100%;
		display: block;
		-webkit-transition: opacity 200ms ease;
		transition: opacity 200ms ease;
		opacity: 1;
	}
</style>
